<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
    html,
    body {
        background: #fff;
    }

    .header_inner {
        width: 100%;
        height: 44px;
        position: relative;
        /*border: 1px solid red;*/
    }

    .arrow_left {
        width: 22px;
        height: 24px;
        position: absolute;
        top: 10px;
        left: 12.5px;
        background: url(./image/back_arrow.png) no-repeat;
        background-position: center center;
        background-size: 22px 22px;
    }

    .title {
        width:auto;
        max-width:100px;
        /*border: 1px solid red;*/
        height: 100%;
        line-height: 44px;
        text-align: center;
        position: absolute;
        left:50%;
        margin-left: -50px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        top: 0;
        font-size: 18px;
        font-family: SimHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app">
      <header class="header" id="header" tapmode onclick="api.closeWin()">
        <div class="header_inner">
          <div class="arrow_left"></div>
          <div class="title" id="title"></div>
        </div>
      </header>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        $api.fixStatusBar($api.byId('header'));
        vm.header_h = $api.offset($api.byId('header')).h;
        var timestamp = new Date().getTime();
        vm.url = api.pageParam.link;
        console.log(api.pageParam.link);
        api.setStatusBarStyle({
            style: 'dark'
        });


        vm.initFrame();
        api.setFrameClient({
            frameName: 'brower_frame_'
        }, function(ret, err) {
            //加载状态，数字类型，取值范围：0-开始加载；1-加载进度发生变化；2-结束加载；3-title发生变化；4-url发生变化
            switch (ret.state) {
                case 3:
                    $api.html($api.byId('title'), ret.title);
                    break;
            }
        });

        //监听退回键
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            vm.GoBack();
        });
        if(api.pageParam.type){
          setTimeout(function(){
             cl.closeWin({
               name:"brower_"
             })
          },5000)
        }


    };
    var vm = new Vue({
        el: '#app',
        data: {
            header_h: '',
            url: ''
        },
        methods: {
            initFrame: function() {
                console.log(vm.url);
                //打开外部页面
                api.openFrame({
                    name: 'brower_frame_',
                    url: vm.url,
                    rect: {
                        marginTop: vm.header_h,
                        marginBottom: 0
                    },
                    progress: {
                        type: 'page',
                        color: '#ff7600'
                    }
                });
            },
            /**
             * [历史记录后退]
             */
            GoBack: function() {
                api.historyBack({
                    frameName: "brower_frame_"
                }, function(ret) {
                    if (!ret.status) {
                        //没有历史记录了则关闭当前窗口
                        api.closeWin();
                    }
                });
            },
            /**
             * [历史记录前进]
             * @return {[type]} [description]
             */
            GoForward: function() {
                api.historyForward({
                    frameName: "brower_frame_"
                });
            },
            /**
             * [Refresh 刷新页面]
             * @constructor
             */
            Refresh: function() {
                api.execScript({
                    frameName: 'brower_frame_',
                    script: 'location.reload();'
                });
            }
        }
    });
</script>

</html>
